Learn more about using Gestalt Principles in wireframes 深入瞭解如何線上框圖中使用格式塔原則
設計並不完全是主觀的（Design Isn’t Just Art—It Solves Problems）
每個人對設計的感受可能不同，但設計的目的是用合理的方法解決使用者的實際問題。做設計時，要想清楚這些問題：
- 使用者來這裡想做什麼？
- 我的設計能幫他們做到嗎？
- 使用者能不能輕鬆看懂和使用？
格式塔原則可以幫我們讓頁面更清楚、更好用。
格式塔原則線上框圖中的實際應用（Applying Gestalt Principles in Wireframes）
相似性原則：一致外觀代表相同功能（Similarity: Visual Consistency Indicates Function）
設計線框圖時，讓相似的元素看起來一樣，使用者就能明白它們的作用也一樣。
舉個例子：
- App裡有很多使用者頭像或圖片，就讓它們的形狀和大小都一樣（比如都用圓形，或都用方形）。
- 使用者看到後就會知道：這些都是用來看使用者資料或檢視圖片的。小貼士：功能相同的元素，就讓它們長得一樣，這樣使用者一眼就能認出來。
接近性原則：距離暗示關聯（Proximity: Grouping by Placement）
接近性原則很簡單：放得近的東西，使用者會覺得它們有關係。
舉個例子：
- 如果你把一段文字和"瞭解更多"按鈕放在一起，使用者就會明白：這個按鈕是用來看這段文字的詳細內容的。
- 但如果按鈕離文字很遠，使用者可能會搞不清楚這個按鈕是幹什麼用的。
記住：想讓使用者知道哪些東西是一組的？就把它們放近一點。
共同區域原則：用視覺框架建立歸屬感（Common Region: Framing for Structure）
共同區域是什麼意思？就是把一些東西放在同一個框裡，使用者就會覺得它們是一組的。
舉個例子：手機App上下方的導航欄，通常會這樣設計：
- 用同一個背景顏色
- 加上邊框或陰影
- 放上功能圖示
這樣設計後，使用者一看就明白：這些圖示都是導航功能，比頁面上其他單獨的圖示更重要。
怎麼用：用背景色或邊框把相關的功能"圈"在一起，頁面結構就會更清楚。
如何在自己的線框圖中應用格式塔原則（How to Apply These Principles in Your Wireframes）
相似性：保持一致性，強化功能認知
如果你在頁面中使用多個頭像、卡片或按鈕，它們應該在大小、形狀上保持一致。
示例：所有使用者頭像都用40x40畫素的圓形，這樣使用者就會知道這些都是“使用者資料入口”。
接近性：用佈局傳達邏輯關係
把相關聯的內容（如文章+按鈕、標題+圖片）放得更近，讓使用者第一眼就理解它們的聯絡。
示例：在產品頁中，把“購買”按鈕緊挨著產品名稱和價格，避免使用者誤會按鈕指向的是別的功能。
共同區域：用邊框或色塊進行分組
使用背景色、邊框或分隔線來“框住”一組內容，讓使用者一眼看出哪些是同一個模組。
示例：使用淺灰背景色包裹導航欄，增強使用者對“主功能區”的感知。
延伸學習與更多應用（More Gestalt Principles to Explore）
格式塔原則遠不止這三種，還有更多可以用來強化設計結構的原則，例如：
- 閉合性（Closure）：大腦傾向於補全缺失資訊，看到未閉合的形狀也會“腦補”成完整的圖案。
- 連續性（Continuity）：元素排列方向一致時，會被看作是連續的整體。
- 對稱性（Symmetry）：對稱元素更容易被使用者識別為整體或有序。
你可以閱讀以下推薦文章，深入學習這些內容：